@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ word-wrap:break-word; word-break:break-all; padding:0; margin:0; list-style:none; outline:0; -webkit-tap-highlight-color:rgba(0,0,0,0); font:inherit; font-size:14px; vertical-align:baseline; font-family:'Microsoft YaHei',Helvetica,Arial,sans-serif; -webkit-overflow-scrolling: touch;}
body{overflow-x:hidden; font-size:1em;}
button,input,option,select,textarea,em{ -webkit-appearance:none; -webkit-text-size-adjust:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); border-radius:0;}
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none; border-radius:0;}
button,img,input,nav,textarea,video{border:0;}
/*body,td{font-size:.9em}*/
a,a:visited{text-decoration:none;-webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
body,html{height:100%; background: #f5f5f5;}
.clear{ clear:both; padding:0; margin:0; line-height:0;}
.clearfix{zoom:1;}
.clearfix:after,.clearfix:before{content:"";display:block;height:0;width:0;visibility:hidden}
.clearfix:after{clear:both;}

@fontKaiti:"楷体","楷体_GB2312";

.posR{position: relative;}
.posA{ position: absolute;}
.pCenter{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}

.header:extend(.posA){
  height: 60px; line-height: 60px; left: 0; top: 0; right: 0; bottom: auto; z-index: 2; background:#2e3856;
  .logo{ color: #FFF; font-size: 24px; padding: 0 20px; font-weight: bold; cursor: pointer;}
}
.content:extend(.posA,.pCenter){ z-index:1;}
.banner:extend(.posA,.pCenter){ background: #39466b;}
.enterBox:extend(.posA){
  width:1200px; margin:auto; left: 0; top: 100px; right: 0; bottom: 50px; z-index: 3;
   text-align: center; font-size: 0;
  a{ display: inline-block; width: 30%; height:200px; text-align: center; line-height: 200px; color: #000; background: #FFF; font-size: 24px; margin:15% 20px 0;}
}
.contentPage:extend(.posA,.pCenter){
  top:60px;
  .contentM:extend(.posA){
    width: 1200px; margin: 0 auto; background: #FFF; left: 0; right: 0; top: 10px; bottom: 10px;  overflow: hidden; overflow-y: auto; box-sizing: border-box; padding: 10px;
    h2{
      height: 40px; line-height: 40px; border-bottom:1px solid #eaeaea;
      span{ font-size: 16px; padding: 0 10px;}
    }
    .topSearch{
      padding: 10px;
      em{ color: #666;}
    }
    .bts{ text-align: center; padding: 20px 0;}
    // 缴费步骤
    .stepPages{
       min-height: 200px;

       .payBox{
          padding: 20px 0; text-align: center;
         dt{
           width: 300px; height: 300px; margin: 0 auto; position: relative; background: #eaeaea; border: 5px solid #FFF; box-shadow: 0 3px 5px #c5c5c5;
           em{ line-height: 300px; color: #666; font-size: 16px;}
           img{ position: absolute; max-width: 100%; max-height: 100%; position:absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
          }
         dd{ font-size: 16px; color: #3c92ea; padding: 20px 0 0; font-weight: bold;}
       }
      .success{
        text-align: center;
        dl{
          padding: 20px 0;
          dt{
            i{ color: #3fb36e; font-size:120px;}
            h3{ font-size: 24px; padding: 20px 0;}
          }
          dd{
            em{ color: #F30; font-size: 16px; padding: 0 10px;}
          }
        }
      }
    }
  }
}

// 发票内容
.invoice{
  background: #FFF; border: 1px solid #e0e0e0; box-shadow: 0 2px 3px #c5c5c5; width: 1000px; margin: 0 auto; padding: 20px 40px; box-sizing: border-box; position: relative;
  .imgBox{height: 0; text-align: right;}
  .imgBox img{ width: 120px; display: inline-block; margin:-120px -20px 0 0;}
  .invoiceTop{
    h3{
      font-size:30px; font-weight: bold; font-family: @fontKaiti; height: 55px; line-height: 55px; position: relative; text-align: center;
      .logo{
        position: absolute; left: 0; top: 0;
        img{width: 200px;}
      }
      em{ color: #F30; margin:0 -340px 0 50px; display: inline-block; font-size: 16px;}
    }
    p{
      padding: 10px 0 5px;
      span{
        font-family: @fontKaiti; font-size: 18px; margin: 0 44px 0 0;
        em{font-family: @fontKaiti; font-size: 18px;}
        &:last-child{margin: 0;}
      }
    }
  }
  .invoiceCenter{
    .fakeTable{
      border: 1px solid #000;
      .fakeTableHeader{
        display: flex;
        div{
          flex: 1; border:1px solid #000; margin: -1px 0 -1px -1px; text-align: center; box-sizing: border-box;
          &:last-child{ border-right: none;}
          em{display: block; padding: 10px 0; font-size: 16px; text-align: center; width: 100%; font-family: @fontKaiti; font-weight: bold; box-sizing: border-box;}
          &>div{
            display: flex; text-align: center; margin: -1px -1px -1px -1px; box-sizing: border-box;
            em{ display: block; padding: 10px 0; text-align: center; width: 100%; }
            span{
              display:block; flex: 1; padding: 10px 0;  border:1px solid #000; border-bottom: none; margin: -1px 0 0 -1px; font-family: @fontKaiti; font-size: 16px; font-weight: bold;
              &:last-child{ border-right: none;}
            }
          }
        }
      }
      .fakeTableBody{
        margin: 1px -1px -1px 0;
        .fakeTableBodyN{
          display: flex; text-align: center; box-sizing: border-box;
          &>div{
            height: 40px; position: relative;
            em{
              display: block; padding: 10px 0; text-align: center; width: 100%; font-family: @fontKaiti; font-size: 16px;position: absolute; white-space: nowrap;
              i{
                font-family: @fontKaiti; font-size: 16px;
                font{ display: inline-block; width: 16px; height: 16px; border: 1px solid #000; vertical-align: middle; margin:-5px 60px 0 5px;}
                tt{ width:100px; border-bottom: 1px solid #000; height: 1px; display: inline-block; vertical-align: middle; margin: 10px 0 0 5px;}
              }
            }
            flex: 1;text-align: center; border: 1px solid #000; margin:-1px 0 0 -1px;
            div{
              display: flex; margin: 0 -1px 0 0; box-sizing: border-box;
              span{ display: block; flex: 1; padding: 10px 0; border:1px solid #000; border-bottom: none; margin: -1px 0 0 -1px; font-family: @fontKaiti; font-size: 16px; box-sizing: border-box;
                &:last-child{ border-right: none;}
              }
            }
            &:last-child{
              border-top: none; border-bottom:none;
            }
          }
        }
      }
    }
  }
  .invoiceBottom{
    padding: 10px 0;
    p{
      span{
        font-family: @fontKaiti; font-size: 18px; margin: 0 120px 0 0;
        &:last-child{margin: 0;}
      }
    }
  }

}

// 弹层内容
.layerBox{
  .bts{ text-align: center; padding: 20px 0;}
}

.printBox{
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: #FFF; z-index: 100;
  .bts{ text-align: center; padding: 20px 0; position: absolute; left: 0; top:auto; right: 0; bottom: 0; margin: auto; }
  .invoice{margin:10px auto; position: relative;
    .close{ position: absolute; top:10px; right: 10px; cursor: pointer; display: none;}
    .close i{ color: #999; font-size: 35px;}
    &:hover{
      .close{ display: block;}
      }
  }
}

